<template>
    <div class="attack-script-data">
        <Poptip
            confirm
            :title="title"
            @on-ok="showModal"
            transfer 
            word-wrap 
            :width="width" >
            <Button  type="primary" :disabled="disabled"
                :ghost="ghost" :class="{'disabled': disabled, 'not-disabled': !disabled}">
                <Icon type="md-desktop"/> 攻击脚本数据
            </Button>
        </Poptip>
        <Modal
            v-model="isShow"
            title="攻击脚本数据"
            :footer-hide="true"
            :width="900"
            class="my-modal"
            :mask-closable="false">
            <Form ref="formInline" :model="formData" :rules="ruleInline" :label-width="80">
                <FormItem label="团队" prop="team">
                    <Select filterable clearable v-model="formData.team" @on-change="changeGroup">
                        <Option v-for="item in accessGroupList" :key="item.id" 
                            :value="item.id">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="人员" prop="user">
                    <Select filterable clearable v-model="formData.user">
                        <Option v-for="item in groupUserList" :key="item.userId" 
                            :value="item.userName">{{item.userName}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="工具" prop="tools">
                    <Input v-model.trim="formData.tools" />
                </FormItem>
                <FormItem label="目标" prop="targetId">
                    <Select filterable clearable v-model="formData.targetId">
                        <Option v-for="item in targetList" :key="item.id" 
                            :value="item.id">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="操作" prop="operation">
                    <Input v-model.trim="formData.operation" />
                </FormItem>
                <FormItem>
                    <Button @click="(isShow = false)" style="margin-right: 8px">取消</Button>
                    <Button type="primary" @click="handleSubmit">发送数据</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>    
</template>

<script>
import { triggerEffect } from '@/api/drill_compete'
import { getaccessgrouplist, getUserInstanceExclude } from '@/api/access_new'
import { getTargetTeamList_new } from '@/api/drill_compete'
import { format } from '@/libs/utils'

export default {
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '设置脚本数据，可以在定制可视化页面查看对应的效果。'
        },
        width: {
            type: Number,
            default: 250
        },
        ghost: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        isShow(newVal) {
            this.$nextTick(() => {
                if (!newVal) {
                    this.$refs.formInline.resetFields()
                }
            })
        }
    },
    data() {
        return {
            targetList: [],
            accessGroupList: [],
            groupUserList: [],
            ruleInline: {
                team: [{
                    required: true,
                    message: '请选择场景',
                    trigger: 'change'
                }],
                user: [{
                    required: true,
                    message: '请选择场景',
                    trigger: 'change'
                }],
                tools: [{
                    required: true,
                    message: '请选择场景',
                    trigger: 'change'
                }],
                targetId: [{
                    required: true,
                    message: '请选择场景',
                    trigger: 'change'
                }],
                operation: [{
                    required: true,
                    message: '请选择场景',
                    trigger: 'change'
                }]
            },
            isShow: false,
            formData: {
                team: '', // 团队名
                user: '', // 用户名
                tools: '', // 用户名
                targetId: '', // 靶标
                operation: '' // 做了什么
            }
        }
    },
    mounted() {
        this.getaccessgrouplist()
        this.getAllTargetTeamList()
    },
    methods: {
        changeGroup(id) {
            if (id) {
                this.getUserList(id)
            } else {
                this.groupUserList = []
            }
        },
        getUserList(id) {
            getUserInstanceExclude({
                testId:this.$route.query.id,
                pageIndex: 1,
                pageSize: 2147483646,
                accessGroupId: id
            }).then(({ code, data = {}, message }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                this.groupUserList = data.data || []
            })
        },
        getaccessgrouplist() {
            getaccessgrouplist({
                pageIndex: 1,
                pageSize: 2147483646,
                testId:this.$route.query.id
            }).then(({ code, message, data = {} }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                this.accessGroupList = data.items || []
            })
        },
        getAllTargetTeamList() {
            getTargetTeamList_new({
                pageIndex: 1,
                pageSize: 2147483647,
                sceneId: this.$route.query.id,
                projectId: this.$route.query.prjid
            }).then(({ code, message, data = {} }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                this.targetList = data.items || []
            })
        },
        showModal() {
            this.isShow = true
        },
        handleSubmit() {
            this.$refs.formInline.validate(valid => {
                if (valid) {
                    let item = this.targetList.find(item => item.id === this.formData.targetId)
                    let ip, name
                    if (item) {
                        ip = item.ip
                        name = item.name
                    }
                    let team = (this.accessGroupList.find(item => item.id === this.formData.team) || {})
                    let param = {
                        time: format(new Date()),
                        team: team.name, // 团队名
                        user: this.formData.user, // 用户名
                        tools: this.formData.tools, // 用户名
                        target: {
                            ip,
                            name
                        },
                        operation: this.formData.operation // 做了什么
                    }
                    triggerEffect(this.$route.query.prjid, JSON.stringify(param)).then(({ code, message }) => {
                        if (code !== 1) {
                            this.$Message.warning(message);
                            return
                        }
                        this.$Message.success('脚本数据发送成功');
                    })
                } else {
                    this.$Message.warning('请完善表单')
                }
            })
        }
    },
}
</script>

<style scoped>
.disabled /deep/ i {
    color: #7D7F92 !important;
}

.not-disabled /deep/ i {
    color: #ffffff !important;
}
</style>